<template>
<div style="height: 940px">
  <el-row>
    <el-col :span="11" :offset="3">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item><b>首页</b></el-breadcrumb-item>
    <!--    :to="{ path: '/home' }"-->
    <el-breadcrumb-item><router-link :to="{path:'/food'}"><b>饮食百科</b></router-link></el-breadcrumb-item>
    <el-breadcrumb-item><b>{{this.$route.query.typename}}</b></el-breadcrumb-item>
  </el-breadcrumb>
      <div><br>
        <div><i class="el-icon-share" style="color: red;font-size: 20px"></i><span style="font-size: 20px"><b>常见食物分类</b></span></div><br>
        <el-card class="box-card" v-for="(item,index) in foodData" :key="o" shadow="hover" style="height: 100px">
          <div  class="text item">
            <el-image  v-bind:src=item.foodphoto style="height: 60px;width: 60px" >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <span class="sd">{{item.foodname}}</span>
            <p class="st">{{item.foodbrief}}</p>
          </div>
        </el-card>
        <br>
<!--        <el-pagination-->
<!--          @current-change="handleCurrentChange"-->
<!--          :page-size="pagesize"-->
<!--          :pager-count="9"-->
<!--          layout="total,prev, pager, next,jumper"-->
<!--          :total="totalCount">-->
<!--        </el-pagination>-->
      </div>
    </el-col>
    <el-col :span="7" :offset="1"><div class="dinner"><dinner></dinner></div></el-col>
  </el-row>
</div>
</template>

<script>
import dinner from "./dinner";
import classify from "./classify";
export default {
  name: "fooddetail",
  components:{
    dinner:dinner,
  },
  data() {
    return {
      url:require("@/assets/foodtitle.jpg"),
      foodData: [
        // {
        //   foodphoto:"#",
        //   foodname:"",
        //   foodbrief:"",
        // }
      ], //描述food的信息
      // 分页
      totalCount: 0, //总条数，总共有多少条数据
      pagesize:7, //每一页展示8条数据
    }
  },
  methods:{
    handleCurrentChange(val) {
      // console.log(${val});
      var page=val; //显示要查询的页数
      var size=this.pagesize; //显示每页查询的个数
      console.log(page,size);
      var foodtype=1;

    },
  },
  created() {
    let type = this.$route.query.type;
    var url = '/food/selectbytyle/'+type;
    this.$axios.get(url)
      .then( (res)=> {
        //document.write("data is coming", res.data.code);
        if (res.data.code === 200) {
          for(var i=0;i<res.data.data.length;i++) {
            let row = {}; // 定义一个当前添加数据的行
             row.foodphoto=res.data.data[i].foodphoto;
             row.foodname=res.data.data[i].foodname;
             row.foodbrief=res.data.data[i].foodbrief;
             this.totalCount++;
            this.foodData.push(row);
          }

        }
        else {
          this.$message({message: res.data.msg, type: 'error'})
        }
      }).catch(function (error) {
      console.log(error);
    } );
  }
}
</script>

<style scoped>
.el-breadcrumb{
  line-height: 2;
}
.sd{
  position: relative;
  top: -50px;
  left: 10px;
  font-size: 18px;
}
.st{
  position: relative;
  top:-40px;
  left: 80px;
  font-size: 15px;
  color: #888888;
}

</style>
